<template>
    <el-tabs
      v-model="activeName"
      tab-position="left"
      class="mt-20px text-20px"
      @tab-click="handleClick"
    >
      <el-tab-pane label="个人信息" name="个人信息">
        <PersonInfo />
      </el-tab-pane>
      <el-tab-pane label="密码修改" name="密码修改">
        <Password />
      </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import PersonInfo from './components/personInfo.vue'
import Password from './components/password.vue'

const $router = useRouter()
const $route = useRoute()
const activeName = ref('个人信息')

const handleClick = (tab) => {
  // activeName.value = $route.fullPath
  // $router.push(tab.props.name)
}
</script>

<style scoped lang="scss">
:deep .el-tabs__item:hover {
  background-color: #3a75d3;
  color: #fff;
}
:deep .el-tabs__item {
  height: 40px;
  padding: 20px;
  font-size: 18px;
  margin-bottom: 10px;
}
.fade-enter-from {
  opacity: 0;
  transform: scale(0);
}
.fade-enter-active {
  transition: all 0.3s;
}
.fade-enter-to {
  opacity: 1;
  transform: scale(1);
}
</style>
